<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        ul {
            display: flex;
            width: 1200px;
            margin: auto;
            flex-wrap: wrap;
        }

        li {
            width: 23%;
            margin: 1%;

        }

        img {
            width: 100%;
            height: 300px;
        }

        .page {
            font-size: 50px;
            width: 1200px;
            margin: auto;
        }

        .off {
            color: gray;
        }
    </style>
</head>

<body>

    <ul>
        <!-- <li>
            <a href="">
                <img src="" alt="">
                <h3></h3>
                <p></p>
                <strong></strong>
            </a>
        </li> -->
    </ul>

    <div class="page">
        <span class="prev off">&lt;</span>
        <span class="showPage">1 / 10</span>
        <span class="next">&gt;</span>
    </div>

    <script>

        var list = [{ "id": 625153951363, "name": "2020西太湖国际音乐节", "showTime": "2020.09.19-09.20", "price": "199-399", "city": "常州", "address": "常州西太湖中国花卉博览景区北门", "pic": "https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01zJEpaN2GdSG1Xvo8y_!!2251059038.jpg" }, { "id": 624506842658, "name": "2020舟山东海音乐节", "showTime": "2020.09.04-09.06", "price": "200-680", "city": "舟山", "address": "舟山市朱家尖南沙景区沙滩", "pic": "https://img.alicdn.com/bao/uploaded/i4/2251059038/O1CN01L70FVl2GdSG2wpwyE_!!0-item_pic.jpg" }, { "id": 623216520608, "name": "中国•磐安 2020氧气山水音乐节", "showTime": "2020.08.22 周六 16:30", "price": "280", "city": "金华", "address": "金华磐安花溪风景区", "pic": "https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01ECp69h2GdSFpoUPAm_!!2251059038.jpg" }, { "id": 624345993344, "name": "2020“一生中最爱”七夕演唱会", "showTime": "2020.08.25 周二 19:30", "price": "180-580", "city": "北京", "address": "糖果TANGO-雍和宫店三层", "pic": "https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01WGNYBE2GdSFqXJgII_!!0-item_pic.jpg" }, { "id": 624170605605, "name": "东海五渔节之敢潮音乐节", "showTime": "2020.08.22 周六 18:00", "price": "198-228", "city": "舟山", "address": "舟山嵊泗五龙乡听海广场(原黄沙村船厂)", "pic": "https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i1/2251059038/O1CN01eV5pR32GdSFxJUb0v_!!2251059038.jpg" }, { "id": 624000957041, "name": "【聚光灯】周四周日爆笑脱口秀剧场", "showTime": "2020.08.13-09.27", "price": "99", "city": "上海", "address": "健力士醇黑坊", "pic": "https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01s9Jlz32GdSFv79hIO_!!0-item_pic.jpg" }, { "id": 623838540974, "name": "2020真世界摇滚演出", "showTime": "2020.08.29 周六 20:30", "price": "120", "city": "北京", "address": "糖果TANGO-雍和宫店三层", "pic": "https://img.alicdn.com/bao/uploaded/i2/2251059038/O1CN01HWbQXk2GdSFxARpRD_!!0-item_pic.jpg" }, { "id": 624699066028, "name": "开心麻花首部悬疑惊悚喜剧《醉后赢家》", "showTime": "2020.08.25-09.06", "price": "80-1080", "city": "北京", "address": "地质礼堂剧场", "pic": "https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i2/2251059038/O1CN01Vv1mQO2GdSFvnmIDs_!!2251059038.png" }, { "id": 625219995330, "name": "开心麻花经典爆笑舞台剧《乌龙山伯爵》", "showTime": "2020.08.25-08.30", "price": "80-1080", "city": "北京", "address": "北京展览馆剧场", "pic": "https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01znXuKj2GdSG6ACMMb_!!0-item_pic.jpg" }, { "id": 623454281510, "name": "开心麻花重磅新戏《贼想得到你》", "showTime": "2020.08.12 周三", "price": "80-1280", "city": "上海", "address": "上汽上海文化广场", "pic": "https://img.alicdn.com/bao/uploaded/i1/2251059038/O1CN013YAyeY2GdSFnXwgnQ_!!0-item_pic.jpg" }, { "id": 625314963280, "name": "开心麻花重磅新戏《贼想得到你》", "showTime": "2020.08.15-08.21", "price": "100-1180", "city": "上海", "address": "虹桥艺术中心", "pic": "https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01Qb8wyX2GdSG30DCl4_!!0-item_pic.jpg" }, { "id": 622815888793, "name": "开心麻花上海首部原创爆笑舞台剧《皇帝的新娘》", "showTime": "2020.08.12-08.16", "price": "80-1180", "city": "上海", "address": "上戏实验剧院", "pic": "https://img.alicdn.com/bao/uploaded/i2/2251059038/O1CN01uie4Gf2GdSFlp1Rvv_!!0-item_pic.jpg" }, { "id": 624443634831, "name": "孟京辉戏剧作品《我爱xxx》", "showTime": "2020.08.13-08.16", "price": "100-380", "city": "北京", "address": "蜂巢剧场", "pic": "https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01LwdJRL2GdSFtDPtRL_!!2251059038.jpg" }, { "id": 624095704875, "name": "【8月8日-16日场次周年特惠低至四折】太阳马戏X绮幻之境 - 8月", "showTime": "2020.08.12-08.30", "price": "360-3460", "city": "杭州", "address": "杭州新天地太阳剧场", "pic": "https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01iyWOwU2GdSG2iMBsM_!!0-item_pic.jpg" }, { "id": 624163106935, "name": "高达5公里定向挑战赛", "showTime": "2020.09.26 周六", "price": "108-388", "city": "上海", "address": "世纪公园", "pic": "https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01y2n1PI2GdSFtLmEtu_!!2251059038.jpg" }, { "id": 622064265074, "name": "2020 FORMULA1 中国大奖赛（礼包&福袋）", "showTime": "2020.07.04-12.31", "price": "120-270", "city": "上海", "address": "上汽国际赛车场(上海国际赛车场)", "pic": "https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i2/2251059038/O1CN01ZHrnGM2GdSFbZjdUV_!!2251059038.jpg" }, { "id": 623662985515, "name": "2020ChinaJoy电竞赛事荟萃", "showTime": "2020.07.31-10.30", "price": "0", "city": "北京", "address": "请到大麦APP和优酷APP观看", "pic": "https://img.alicdn.com/bao/uploaded/i4/2251059038/O1CN01RpgBQ82GdSFoMD7h8_!!0-item_pic.jpg" }, { "id": 618307700815, "name": "2020 FORMULA1 中国大奖赛（服装）", "showTime": "2020.05.19-12.31", "price": "248-620", "city": "上海", "address": "上汽国际赛车场(上海国际赛车场)", "pic": "https://img.alicdn.com/bao/uploaded/i2/2251059038/O1CN01scI6Ly2GdSFEYDh7P_!!0-item_pic.jpg" }, { "id": 613334933912, "name": "2020 FORMULA1 中国大奖赛（周边衍生品）", "showTime": "2020.03.11-12.31", "price": "35-160", "city": "上海", "address": "上汽国际赛车场(上海国际赛车场)", "pic": "https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01ZusbUY2GdSENL0iIN_!!2251059038.jpg" }, { "id": 613323173822, "name": "2020 FORMULA1 中国大奖赛（帽品）", "showTime": "2020.03.11-12.31", "price": "200-335", "city": "上海", "address": "上汽国际赛车场(上海国际赛车场)", "pic": "https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01azreXu2GdSF9rIkGV_!!2251059038.jpg" }, { "id": 613940057617, "name": "加速北京跳伞俱乐部高空跳伞体验", "showTime": "2020.08.05-08.31", "price": "2980", "city": "北京", "address": "北京市平谷区马坊镇通航产业基地", "pic": "https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i1/2251059038/O1CN01Ns9MZj2GdSFIp2udB_!!2251059038.png" }, { "id": 624453755826, "name": "《你是演奏家2 · 超级金贝鼓》", "showTime": "2020.08.21-08.23", "price": "180-380", "city": "上海", "address": "美琪大戏院", "pic": "https://img.alicdn.com/bao/uploaded/i4/2251059038/O1CN016u70M62GdSFrTL5GP_!!0-item_pic.jpg" }, { "id": 624211844323, "name": "正版授权·大型儿童实景舞台剧《奥特曼宇宙之光》", "showTime": "2020.09.05 周六", "price": "180-580", "city": "海口", "address": "海南省歌舞剧院", "pic": "https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i2/2251059038/O1CN01ybwkiZ2GdSFy9894v_!!2251059038.jpg" }, { "id": 624672730925, "name": "全国正版授权大型互动式儿童舞台剧 海底小纵队2—火山大冒险", "showTime": "2020.11.15 周日", "price": "80-480", "city": "上海", "address": "黄浦剧场-中剧场", "pic": "https://img.alicdn.com/bao/uploaded/i1/2251059038/O1CN01mfDv5t2GdSFwbhzvt_!!0-item_pic.jpg" }, { "id": 624868314578, "name": "大船文化·加拿大原版音乐启蒙全场互动亲子剧《你是演奏家2·超级金贝鼓》", "showTime": "2020.09.06 周日", "price": "180-380", "city": "天津", "address": "津湾大剧院大剧场", "pic": "https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i4/2251059038/O1CN01l16ZUE2GdSFzGWSPx_!!2251059038.png" }, { "id": 624450522367, "name": "大船文化·法国艺术启蒙魔术剧《美术馆奇妙夜·星夜》中文版", "showTime": "2020.09.06 周日", "price": "120-280", "city": "南京", "address": "江苏大剧院--综艺厅", "pic": "https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01FMizHi2GdSG0AINxP_!!2-item_pic.png" }, { "id": 623125350409, "name": "大船文化 法国艺术启蒙魔术剧《美术馆奇妙夜·星夜》中文版", "showTime": "2020.08.27-08.30", "price": "80-480", "city": "上海", "address": "上汽上海文化广场", "pic": "https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i4/2251059038/O1CN01CiAVft2GdSFpIawAw_!!2251059038.jpg" }, { "id": 623975390263, "name": "正版授权大型实景舞台剧《奥特曼：宇宙之光》（杭州站）", "showTime": "2020.12.13 周日", "price": "68-480", "city": "杭州", "address": "杭州剧院", "pic": "https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i4/2251059038/O1CN01fUBSCY2GdSFsbnPPh_!!2251059038.jpg" }];
        console.log(list);   // 后端给了数据以后，直接打印


        // 分页的逻辑
        //    前端来决定每页显示多少条数据  --- UI决定好的 
        //    后端传数据   总共的页数  后端的数据 / 每页的条数   -- 向上取整

        //    上下翻页
        //    上 page--
        //    下 page++

        // 分页的实现
        //    第一页   0-8         pageLen * 0 - pageLen * 1
        //    第二页   8-16        pageLen * 1 - pageLen * 2
        //    第三页   16-24       pageLen * 2 - pageLen * 3
        //    第四页   24 - 32     
        //    第N页                pageLen * (n - 1) - pageLen * n


        var page = 1;   // 第一页

        var pageLen = 8; // 每页显示多少条数据

        // 求出总页数
        var pageTotal = Math.ceil(list.length / pageLen);
        console.log(pageTotal);

        var oShowPage = document.querySelector('.showPage');
        oShowPage.innerHTML = '1 / ' + pageTotal;

        var oUl = document.querySelector('ul');

        // 渲染页面
        render();



        // 下翻页
        var oNext = document.querySelector('.next');
        oNext.onclick = function () {
            // 
            if (page === pageTotal) {
                return
            }
            page++;
            // 显示
            render();

            oShowPage.innerHTML = page + ' / ' + pageTotal;
        }






        function render() {
            var html = '';
            // pageLen * (n - 1) - pageLen * n

            var max = pageLen * page;
            if (max > list.length) max = list.length;   // 判断分页是否数据超过了最大值

            for (var i = pageLen * (page - 1); i < max; i++) {
                html += `
                <li>
                    <a href="">
                        <img src="${list[i].pic}" alt="">
                        <h3>${list[i].name}</h3>
                        <p>${list[i].city}</p>
                        <strong>${list[i].price}</strong>
                    </a>
                </li>
                `
            }
            oUl.innerHTML = html;
        }


    </script>

</body>

</html>